<template>
	<view v-show="show">
		<view class="more-share-model" @tap="shareshow"></view>
		<view class="more-share animated fadeInUp fast">
			<view class="more-share-title uflex-a-j_c">分享到</view>
			<scroll-view scroll-x="true" class="more-share-body">
				<block v-for="(val, index) in providerList" :key="index">
					<view class="more-share-item uflex-a-j_c" @tap="share(val)">
						<view class="icon iconfont uflex-a-j_c"
						:class="['icon-'+val.zicon, 'more-share-'+val.zclass]"></view>
						<text>{{val.name}}</text>
					</view>
				</block>
			</scroll-view>
			<view class="more-share-bottom uflex-a-j_c" @tap="shareshow">取消</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		show: Boolean
	},
	data() {
		return {
			title: 'share',
			shareText: 'uni-app可以同时发布成原生App、小程序、H5，邀请你一起体验！',
			href:"https://uniapp.dcloud.io",
			image: '',
			shareType:1,
			providerList: []
		}
	},
	mounted () {
		uni.getProvider({
			service: 'share',
			success: (e) => {
				console.log('success', e);
				let data = []
				for (let i = 0; i < e.provider.length; i++) {
					switch (e.provider[i]) {
						case 'weixin':
							data.push({
								name: '微信好友',
								id: 'weixin',
								zicon: 'weixin',
								zclass: 'weixin',
								sort:0
							})
							data.push({
								name: '朋友圈',
								id: 'weixin',
								zicon: 'weixin',
								zclass: 'pyq',
								type:'WXSenceTimeline',
								sort:1
							})
							break;
						case 'sinaweibo':
							data.push({
								name: '新浪微博',
								id: 'sinaweibo',
								zicon: 'xinlangweibo',
								zclass: 'weibo',
								sort:2
							})
							break;
						case 'qq':
							data.push({
								name: 'QQ',
								id: 'qq',
								zicon: 'QQ',
								zclass: 'qq',
								sort:3
							})
							break;
						default:
							break;
					}
				}
				console.log(data)
				this.providerList = data.sort((x,y) => {
					return x.sort - y.sort
				});
			},
			fail: (e) => {
				console.log('获取分享通道失败', e);
				uni.showModal({
					content:'获取分享通道失败',
					showCancel:false
				})
			}
		});
	},
	methods: {
		shareshow() {
			this.$emit('shareshow');
		},
		async share(e) {
			console.log('分享通道:'+ e.id +'； 分享类型:' + this.shareType);
			
			if(!this.shareText && (this.shareType === 1 || this.shareType === 0)){
				uni.showModal({
					content:'分享内容不能为空',
					showCancel:false
				})
				return;
			}
			
			if(!this.image && (this.shareType === 2 || this.shareType === 0)){
				uni.showModal({
					content:'分享图片不能为空',
					showCancel:false
				})
				return;
			}
			
			let shareOPtions = {
				provider: e.id,
				scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
				type: this.shareType,
				success: (e) => {
					console.log('success', e);
					uni.showModal({
						content: '已分享',
						showCancel:false
					})
				},
				fail: (e) => {
					console.log('fail', e)
					uni.showModal({
						content: e.errMsg,
						showCancel:false
					})
				},
				complete:function(){
					console.log('分享操作结束!')
				}
			}
			
			switch (this.shareType){
				case 0:
					shareOPtions.summary = this.shareText;
					shareOPtions.imageUrl = this.image;
					shareOPtions.title = '欢迎体验uniapp';
					shareOPtions.href = 'https://uniapp.dcloud.io';
					break;
				case 1:
					shareOPtions.summary = this.shareText;
					break;
				case 2:
					shareOPtions.imageUrl = this.image;
					break;
				case 5:
					shareOPtions.imageUrl = this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
					shareOPtions.title = '欢迎体验uniapp';
					shareOPtions.miniProgram = {
						id:'gh_33446d7f7a26',
						path:'/pages/tabBar/component/component',
						webUrl:'https://uniapp.dcloud.io',
						type:0
					};
					break;
				default:
					break;
			}
			
			if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片 
				shareOPtions.imageUrl = await this.compress();
			}
			if(shareOPtions.type === 1 && shareOPtions.provider === 'qq'){//如果是分享文字到qq，则必须加上href和title
				shareOPtions.href = 'https://uniapp.dcloud.io';
				shareOPtions.title = '欢迎体验uniapp';
			}
			uni.share(shareOPtions);
		},
		compress(){//压缩图片 图文分享要求分享图片大小不能超过20Kb
			console.log('开始压缩');
			let img = this.image;
			return new Promise((res) => {
				var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
				console.log('after' + localPath);
				// 压缩size
				plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
					entry.file((file) => {// 可通过entry对象操作图片 
						console.log('getFile:' + JSON.stringify(file));
						if(file.size > 20480) {// 压缩后size 大于20Kb
							plus.zip.compressImage({
								src: img,
								dst: img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG'),
								width: '10%',
								height: '10%',
								quality: 1,
								overwrite: true
							}, (event) => {
								console.log('success zip****' + event.size);
								let newImg = img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG');
								res(newImg);
							}, function(error) {
								uni.showModal({
									content:'分享图片太大,需要请重新选择图片!',
									showCancel:false
								})
							});
						}
					});
				}, (e) => {
					console.log('Resolve file URL failed: ' + e.message);
					uni.showModal({
						content:'分享图片太大,需要请重新选择图片!',
						showCancel:false
					})
				});
			})
		}
	}
};
</script>

<style scoped lang="scss">
.more-share-model {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
	height: 100%;
	background-color: rgba($color: #000000, $alpha: 0.3);
}
.more-share {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2010;
	background-color: #fff;
	width: 100%;
	.more-share-title {
		font-size: 35upx;
		padding: 25upx;
	}
	.more-share-body {
		white-space: nowrap;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1upx solid #eee;
		.more-share-item {
			width: 25%;
			padding: 30upx 0;
			display: inline-block;
			flex-direction: column;
			text-align: center;
			> view {
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
				border: 1px solid;
				font-size: 55upx;
				margin: auto;
				color: #fff;
			}
			> text {
				color: #7a7a7a;
			}
			.more-share-pyq {
				background-color: #514d4c;
			}
			.more-share-weixin {
				background-color: #2ad198;
			}
			.more-share-weibo {
				background-color: #ee5e5e;
			}
			.more-share-qq {
				background-color: #4a73ba;
			}
			.more-share-other {
				background-color: #6aba15;
			}
		}
	}
	.more-share-bottom {
		height: 100upx;
		font-size: 36upx;
	}
}
</style>
